<template>
  <div class="app-container" v-loading="loading" element-loading-text="加载中">
    <div class="mt-2">
      <el-card shadow="never">
        <el-table :data="AnyConstantData">
          <el-table-column prop="tag" label="参数名" align="center" />
          <el-table-column prop="value" label="参数值" show-overflow-tooltip align="center" />
          <el-table-column prop="note" label="备注" show-overflow-tooltip align="center" />
          <el-table-column fixed="right" label="操作" width="220" align="center">
            <template #default="scope">
              <el-button
                type="primary"
                v-if="hasAnthority('variable.update')"
                text
                bg
                size="small"
                @click="handleUpdate(scope.row)"
                >修改</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <!-- 修改 -->
    <el-dialog v-model="updateDialogVisible" title="选择权限" width="50%">
      <el-form
        ref="updateFormRef"
        :model="updateFormData"
        :rules="updateFormRules"
        label-width="110px"
        label-position="left"
      >
        <el-form-item prop="tag" label="参数名">
          <el-input v-model="updateFormData.tag" placeholder="请输入" />
        </el-form-item>
        <el-form-item prop="value" label="参数值">
          <div class="flex">
            <el-input :disabled="isAuthority" v-model="updateFormData.value" placeholder="请输入" />
            <el-button type="primary" class="ml-1" v-if="isAuthority" @click="selectAuth">选择权限</el-button>
          </div>
        </el-form-item>
        <el-form-item prop="note" label="备注">
          <el-input v-model="updateFormData.note" placeholder="请输入" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="updateDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确认</el-button>
      </template>
    </el-dialog>

    <!-- 权限树 -->
    <el-dialog destroy-on-close v-model="treeDialogVisible" title="修改参数" @closed="AuthorityData = []" width="50%">
      <el-tree
        ref="treeRef"
        node-key="id"
        highlight-current
        :default-checked-keys="defaultCheckedKeys"
        :default-expanded-keys="expandedKeys"
        :props="props"
        :data="AuthorityData"
        show-checkbox
        @check="handleCheck"
      />
      <template #footer>
        <el-button @click="treeDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleConfirmTree">确认</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { IGetAuthorityResponseData } from "@/api/authority/types/authority"
import { getAnyConstantDataApi, getAuthorityValueDataApi, updateAnyConstantDataApi } from "@/api/system"
import { IGetAnyConstantResponseData } from "@/api/system/types/system"
import { getCheckedKeys, getExpandedKeys, showPromptMessage } from "@/utils"
import { ElTree, FormInstance, FormRules } from "element-plus"
import { reactive, ref } from "vue"
import { hasAnthority } from "@/utils"
const loading = ref(false)
const AnyConstantData = ref<IGetAnyConstantResponseData[]>([])

const getAnyConstantData = () => {
  loading.value = true
  getAnyConstantDataApi()
    .then((res) => {
      AnyConstantData.value = res.data.list
    })
    .catch(() => {
      AnyConstantData.value = []
    })
    .finally(() => {
      loading.value = false
    })
}

getAnyConstantData()

const updateFormRules: FormRules = reactive({
  tag: [{ required: true, trigger: "blur", message: "请输入参数名" }],
  value: [{ required: true, trigger: "blur", message: "请输入参数值" }]
})
const updateFormRef = ref<FormInstance | null>(null)
const updateFormData = reactive<IGetAnyConstantResponseData>({
  id: undefined,
  tag: "",
  value: "",
  note: ""
})
const isAuthority = ref<boolean | undefined>(undefined)
const updateDialogVisible = ref(false)
const handleUpdate = (row: IGetAnyConstantResponseData) => {
  updateFormData.id = row.id
  updateFormData.tag = row.tag
  updateFormData.value = row.value
  updateFormData.note = row.note
  isAuthority.value = row.isAuthority
  updateDialogVisible.value = true
}

const handleConfirm = () => {
  loading.value = true
  updateAnyConstantDataApi(updateFormData)
    .then(() => {
      showPromptMessage("success", "修改成功")
      getAnyConstantData()
    })
    .finally(() => {
      updateDialogVisible.value = false
      loading.value = false
    })
}

const props = {
  label: "tag",
  children: "children"
}

const defaultCheckedKeys = ref<number[]>([])
const expandedKeys = ref<number[]>([])
const treeDialogVisible = ref(false)
const AuthorityData = ref<IGetAuthorityResponseData[]>([])
const treeRef = ref<InstanceType<typeof ElTree>>()
const selectAuth = () => {
  updateFormData.id &&
    getAuthorityValueDataApi(updateFormData.id).then((res) => {
      AuthorityData.value = res.data.list
      defaultCheckedKeys.value = getCheckedKeys(res.data.list)
      expandedKeys.value = getExpandedKeys(res.data.list)
      console.log(defaultCheckedKeys.value, expandedKeys.value)
      treeDialogVisible.value = true
    })
}
const checkedKeysStr = ref("")
const handleCheck = () => {
  checkedKeysStr.value = treeRef.value!.getCheckedKeys(true).toString()
}

const handleConfirmTree = () => {
  updateFormData.value = checkedKeysStr.value
  treeDialogVisible.value = false
}
</script>

<style scoped></style>
